<template>
  <div class="autoBox" @click="isShow=false" :style="{height:$height-159+'px',overflow:'hidden'}">
    <header>
      <span class="auto_title">社交模板列表</span>
      <a href="javascript:void(0)">
        <b class="search-roll">
          <input type="text" placeholder="输入模板名称查找" class="search" v-model="keyWord"
                 @keyup.enter="handleCurrentChange(1)">
          <i class="el-icon-search" @click="handleCurrentChange(1)"></i>
        </b>
        <el-button size="mini" type="primary" class="new-btn" @click="$router.push({path: '/automation/template/xml/add'})"
                   id="addSocial">
          +添加社交模板
        </el-button>
      </a>
    </header>
    <div class="common-list" v-show="frag">
      <table class="temp-table">
        <thead>
        <tr>
          <th style="width: 250px">社交动态主题</th>
          <th>创建时间</th>
          <th style="cursor: pointer"><span @click.stop="isShow=!isShow">创建人<i class="el-icon-arrow-down"></i></span>
            <div class="menus" v-show="isShow" @click.stop="isShow=true">
              <el-checkbox v-model="checked" @change="handleChange">所有人</el-checkbox>
              <el-checkbox-group v-model="checkList" @change="handle">
                <el-checkbox :label="item" v-for="item,index in account" :key="index"></el-checkbox>
              </el-checkbox-group>
            </div>
          </th>
          <th>是否共享</th>
          <th style="width: 140px">操作</th>
        </tr>
        </thead>
        <tbody :style="{minHeight:$height-247+'px'}">
        <tr v-for="item,index in tableData" :key="index">
          <td style="width: 250px;" class="more" :title="item.name">{{item.name}}</td>
          <td>{{item.createTime}}</td>
          <td>{{item.createName}}</td>
          <td>
            <el-switch @change="(value) => changeShare(item,item.id,value)"
                       :title="item.isShare?'取消共享':'共享'"
                       v-model="item.isShare" style="width:30px"
                       :disabled="!item.isMine">
            </el-switch>
          </td>
          <td style="width: 140px">
            <router-link title="预览社交模板" :to="{path:`/automation/template/xmlReview/${item.id}`}" target="_blank">
              <span class="icon-review iconBtn"></span>
            </router-link>
            <span class="icon-copy iconBtn" title="复制该社交模板" @click="copy(item)"></span>
            <span class="icon-bianji iconBtn" title="编辑" @click="edit(item.id)" v-show="item.isMine"></span>
            <span class="icon-delete_icon iconBtn" title="删除" @click="remove(item.id)" v-show="item.isMine"></span>
          </td>
        </tr>
        <tr class="empty-img" v-show="isEnd" style="border-bottom: 0">
          <td colspan="8" style="background-color: #fff">
            <img src="../../../../../public/img/empty.png" alt="">
          </td>
        </tr>
        </tbody>
      </table>
      <el-pagination class="fixed" v-show="total>0"
                     background align="right"
                     @current-change="handleCurrentChange"
                     @size-change="handleSizeChange"
                     :current-page="nowPage"
                     :page-size="nowSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <VueTour ref="vueTour" :steps="steps" prev="" type="0" path="/automation/template/xml/add"></VueTour>
  </div>
</template>

<script>
    import {xmllList, copyRule, deleteXmlTemplate, changeShare,getNextMan} from "@/api/automation/xml"
    import VueTour from '@/components/automation/VueRour'
    import {mapState} from 'vuex'

    export default {
        name: "index",
        components: {VueTour},
        data() {
            return {
                frag: false,
                tableData: [],
                total: 0,
                nowSize: 20,
                nowPage: 1,
                account: [],
                checkList: [],
                createNames: '',
                isShow: false,
                checked: false,
                keyWord: '',
                steps: [
                    {
                        target: '#addSocial',
                        content: '【社交自动化规则创建】<br>第一步，点击添加社交模板'
                    }
                ],
                isEnd: false
            }
        },
        computed: {
            ...mapState(['common'])
        },
        watch: {
            isShow: function (val, old) {
                if (!val) {
                    if (this.checkList.length > 0) {
                        //请求数据
                        if (this.checked) {//全选
                            this.createNames = '';
                        } else {
                            this.createNames = this.checkList.join(',');
                        }
                        this.nowPage = 1;
                        this.isShow = false;
                        this.getData();
                    }
                } else {
                    this.createNames = '';
                    this.checked = false;
                    this.checkList = [];
                }
            }
        },
        created(){
            this.nowPage = this.common.commonPage;
            this.nowSize = this.common.commonPageSize;
        },
        mounted() {
            this.getData();
            this.getNextMan();
            if (!this.common.isFirstSocial) return;
            this.$nextTick(() => {
                this.$refs.vueTour.init();//初始化
            })
        },
        methods: {
            getData() {
                xmllList(this.keyWord, this.createNames, this.nowPage, this.nowSize).then(res => {
                    if (res.data.success) {
                        this.tableData = res.data.data.records
                        this.total = res.data.data.total;
                        this.isEnd = this.total == 0;
                    }
                    this.frag = true
                })
            },
            changeShare(row, id, state) {
                row.isShare = !state;
                this.$confirm(`${state ? '' : '取消'}共享该社交模板?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: "success"
                }).then(() => {
                    changeShare(id, state).then(res => {
                        if (res.data.success) {
                            this.getData();
                            this.$message({message: res.data.msg, type: 'success'});
                        }
                    })
                }).catch(() => {
                });
            },
            handleChange(val) {
                if (val) {
                    this.checkList = this.account;
                } else {
                    this.checkList = []
                }
            },
            handle(val) {
                this.checked = val.length == this.account.length
            },
            getNextMan() {
                getNextMan().then(res => {
                    if (res.data.success) {
                        this.account = res.data.data
                    }
                })
            },
            copy(item) { // 复制
                this.$prompt('请输入复制后的社交模板名称', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue: item.name + "复制",
                    inputPattern: /^.{1,20}$/,
                    inputErrorMessage: '名称长度1-20位字符',
                    closeOnPressEscape:false,
                    closeOnClickModal:false
                }).then(({value}) => {
                    copyRule(item.id, value).then(res => {
                        if (res.data.success) {
                            this.$message({
                                type: 'success',
                                message: '复制成功'
                            });
                        }
                        this.getData()
                    })

                }).catch(() => {
                });
            },
            remove(id) { // 删除模板
                this.$confirm(' <div style="margin: 20px 10px;">\n' +
                    '        <p style="line-height: 30px; font-size: 14px;">立即删除该社交模板吗？</p>' +
                    '<p style="line-height: 30px; font-size: 14px;">确认<span style="color: #2A97F9">[社交自动化规则]</span>中无此模板在使用中!</p>' +
                    '      </div>', '社交模板', {
                    dangerouslyUseHTMLString: true,
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    confirmButtonText: '确 认',
                    cancelButtonText: '取 消',
                }).then(() => {
                    deleteXmlTemplate(id).then(res => {
                        if (res.data.success) {
                            this.$message({
                                type: "success",
                                message: res.data.msg
                            })
                            this.getData()
                        }
                    })
                }).catch(() => {
                })
            },
            edit(id) { // 跳转到详情
                this.$store.commit('SET_COMMONPAGE', {page:this.nowPage,pageSize:this.nowSize});
                this.$router.push({path: `/automation/template/xml/edit/${id}`})
            },
            handleSizeChange(size) { // 条数发生改变
                this.nowSize = size
                this.$store.commit('SET_COMMONPAGE', {page:this.nowPage,pageSize:this.nowSize});
                this.getData()
            },
            handleCurrentChange(page) { //页数发生变化
                this.nowPage = page
                this.$store.commit('SET_COMMONPAGE', {page:this.nowPage,pageSize:this.nowSize});
                this.getData()
            }
        }
    }
</script>

<style lang="scss" scoped>
  header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
  }

  .auto_title {
    color: #435B77;
    font-weight: 600;
  }

  .iconBtn {
    margin: 0 5px;
    cursor: pointer;
  }
</style>
